<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style type="text/css">
			.box {
				width: 800px;
				height: 1500px;
				border: 2px solid #000000;
				background-color: rgba(255,0,0,.5);
				background-image: url(../../img/0099822e42b4428cb25c4cdebc6ca53d.webp);
				background-repeat: no-repeat;
				/* background-size: 100%; */
				background-position: 200px 400px;
				background-attachment: fixed;
			}
			.xubi{
				margin: 200px;
				border: 1px solid #708090;
				width: 95px;
				height: 95px;
				background-image: url(../../img/timg.jpg);
				background-position: -121px -49px;
				transition: all .8s;
			}
			.xubi:hover {
				background-position: -13px -49px;
			}
		</style>
	</head>
	<body>
		
		<!-- 背景属性
		 背景颜色： background-color  颜色四种 关键字 、十六进制 、rgb  rgba
		 背景图片 ：background-image
		           top left 
		背景平铺：background-repeat:默认repeat、no-repeat/ repeat-x  -y		   
		图片定位 ： background-position   可以有一个center或者两个关键字
		图片固定： background-attachment
		 -->
		 
		 <div class="box"></div>
		 <div class="xubi">
			 
		 </div>
	</body>
</html>
